<template>
    <div class="login-container">
        <div class="login-form">
            <div class="form-header">
                <h2>{{ isLogin ? '登录' : '注册' }}</h2>
                <el-button type="text" @click="toggleForm">
                    {{ isLogin ? '去注册' : '去登录' }}
                </el-button>
            </div>

            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" @submit.prevent="submitForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item v-if="!isLogin" label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" native-type="submit">
                        {{ isLogin ? '登录' : '注册' }}
                    </el-button>
                </el-form-item>
                
                <!-- <el-button type="text" @click="toggleForm"> 
                    {{ isLogin ? '去注册' : '去登录' }}
                </el-button> -->
            </el-form>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
    name: 'LoginView',
    setup() {
        const store = useStore();
        const router = useRouter();
        const formRef = ref(null);
        const isLogin = ref(true);

        const form = reactive({
            username: '',
            password: '',
            confirmPassword: '',
        });

        const validatePassword = (rule, value, callback) => {
            if (value !== form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        // 验证密码是否一致
        // const validatePassword = (rule, value, callback) => {
        //     if (value !== form.password) {
        //         callback(new Error('两次输入密码不一致!'));
        //     } else {
        //         callback();
        //     }
        // };
        // 获取当前时间
        const getCurrentTime = () => {
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            const time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return time;
        };

        const submitForm = () => {
            formRef.value.validate((valid) => {
                if (valid) {
                    if (isLogin.value) {
                        // 登录逻辑
                        store.dispatch('user/login', form).then(() => {
                            router.push({ path: '/' });
                        });
                    } else {
                        // 注册逻辑
                        store.dispatch('user/register', form).then(() => {
                            isLogin.value = true;
                        });
                    }
                }
            });
        };

        const rules = reactive({
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' },
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
            ],
            confirmPassword: [
                { required: true, message: '请再次输入密码', trigger: 'blur' },
                { validator: validatePassword, trigger: 'blur' },
            ],
        });

        const toggleForm = () => {
            isLogin.value = !isLogin.value;
            formRef.value?.resetFields();
        };


        const submitForm = () => {
            formRef.value.validate((valid) => {
                if (valid) {
                    if (isLogin.value) {
                        // 登录逻辑
                        store.dispatch('user/login', form).then(() => {
                            router.push({ path: '/' });
                        });
                    } else {
                        // 注册逻辑
                        store.dispatch('user/register', form).then(() => {
                            isLogin.value = true;
                        });
                    }
                }
            });
        };
        // 获取当前时间
        const getCurrentTime = () => {
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate(); 
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            const time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return time;
        };


        return {
            form,
            rules,
            formRef,
            isLogin,
            toggleForm,
            submitForm,
        };
    },
};
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.login-form {
    width: 400px;
    padding: 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 22px;
}
</style>